<template>
  <div>
    <el-dialog
      :visible.sync="isShowModal"
      width="900px"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      @close="closeModal"
    >
      <div slot="title">
        <span>{{ $t('message.glpj') }}</span>
        <span
          class="primaryColor ml10 underline pointer"
          @click="releRecord"
        >{{ $t('message.gljl') }}</span>
      </div>
      <el-form
        ref="releForm"
        :model="releForm"
        :rules="rules"
        label-suffix="："
        label-width="auto"
        @submit.native.prevent
      >
        <el-form-item :label="$t('message.shxx')" prop="braceletId">
          <div class="shxx">
            <div v-for="(item,index) in braceletList.slice(0,2)" :key="index" class="xzSh">
              <span>{{ item }}</span><i class="el-icon-close" @click="braceletList.splice(index, 1)" />
            </div>
            <el-tooltip v-if="braceletList.length> 2" effect="dark" placement="right">
              <div class="xzSh">+{{ braceletList.length - 2 }}</div>
              <div slot="content">
                <div v-for="(item,index) in braceletList.slice(2,braceletList.length)" :key="index" class="xzSh">
                  {{ item }}<i class="el-icon-close" @click="braceletList.splice(index + 2, 1)" />
                </div>
              </div>
            </el-tooltip>
            <el-input ref="braceletInput" v-model="releForm.braceletId" :placeholder="$t('message.qsr') + $t('message.shbh')" maxlength="50" class="borderless-input" :border="false" clearable @keyup.enter.native="handleBracelet" />
          </div>
        </el-form-item>
        <el-form-item :label="$t('message.pjewm')" prop="code">
          <el-input
            v-model="releForm.code"
            :placeholder="$t('message.qsmsrewmnr')"
            clearable
            :disabled="releForm.memberName ? true : false"
            @keyup.enter.native="getBillList"
          />
        </el-form-item>
        <el-form-item :label="$t('message.xzhy')" prop="memberName">
          <el-input
            v-if="releForm.code"
            v-model="releForm.memberName"
            :placeholder="$t('message.hy2')"
            disabled
          />
          <MemberSearch
            v-else
            ref="MemberSearch"
            :is-show-choose-btn="false"
            @clear="memberClear"
            @select="memberSelect"
          />
        </el-form-item>
      </el-form>
      <div v-if="TicketAbleResult" class="verificat_info_wrap">
        <h2>{{ $t('message.drkypj') }}</h2>
        <div class="verificat_info-main">
          <div class="left">
            <div v-if="TicketAbleList.length == 0" class="default_noticket">
              <img src="@/assets/images/default_noticket.png" alt="">
            </div>
            <template v-if="TicketAbleList.length > 0">
              <div
                v-for="item in TicketAbleList"
                :key="item.code"
                class="info_item"
                :class="{ active: item.code === activeTicketItem.code }"
                @click="ticketItemClick(item)"
              >
                <h2>{{ item.title }}</h2>
                <div class="line">
                  <span
                    v-if="item.useDate"
                    class="span6"
                  >{{ $t('message.syrq') }}：<span class="primaryColor">{{
                    item.useDate
                  }}</span></span>
                  <span
                    v-if="item.useTime"
                    class="span4"
                  >{{ $t('message.sysj') }}：{{ item.useTime }}</span>
                </div>
                <div class="line">
                  <span
                    v-if="item.useProjects"
                    class="span6"
                  >{{ $t('message.syxm') }}：{{ item.useProjects }}</span>
                  <span
                    class="span4"
                  >{{ $t('message.syqk') }}：
                    {{ item.useInfo || "" }}
                  </span>
                </div>
              </div>
            </template>
          </div>
          <div v-if="memberInfo.id" class="right">
            <div class="head_wrap">
              <el-image
                shape="circle"
                style="width: 40px; height: 40px; border-radius: 50%"
                fit="cover"
                class="flex-cc mr10"
                :src="memberInfo.pic ? memberInfo.pic : memberInfo.showFaceUrl?memberInfo.showFaceUrl:default_pic"
                :preview-src-list="[
                  memberInfo.pic ? memberInfo.pic : memberInfo.showFaceUrl?memberInfo.showFaceUrl:default_pic,
                ]"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture" />
                </div>
              </el-image>
              <div class="wrap">
                <div class="name">{{ memberInfo.nickName }}</div>
                <div class="phone">{{ memberInfo.phone }}</div>
              </div>
            </div>
            <div v-if="memberInfo.realName" class="line">
              <span class="key">{{ $t('message.zsxm') }}：</span>
              {{ memberInfo.realName }}
            </div>
            <div class="line">
              <span class="key">{{ $t('message.sex') }}：</span>{{
                memberInfo.sex === "1"
                  ? $t('message.nan')
                  : memberInfo.sex === "0"
                    ? $t('message.nv')
                    : $t('message.bm')
              }}
            </div>
            <div v-if="memberInfo.identityNumber" class="line">
              <span class="key">{{ $t('message.sfzh') }}：</span>{{ memberInfo.identityNumber || "" }}
            </div>
            <div class="line">
              <span class="key">{{ $t('message.hykh') }}：</span>{{ memberInfo.number }}
            </div>
            <div class="line">
              <span class="key">{{ $t('message.czje') }}：</span>{{ memberInfo.rechargeMoney || memberInfo.remainingMoney || "" }}
            </div>
            <div class="line">
              <span class="key">{{ $t('message.zsye') }}：</span>{{ memberInfo.remainingGiveMoney || "" }}
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="verificat_footer">
        <div v-if="TicketAbleResult" class="verificat_num_wrap df_ac">
          <span v-if="depositList && depositList.length > 0">{{ $t('message.shyj') }}：</span>
          <el-radio-group v-model="cashPledge">
            <el-radio
              v-for="item in depositList"
              :key="item.id"
              :label="item.id"
            >{{ item.price }}{{ $t('message.yuan') }}</el-radio>
          </el-radio-group>
        </div>
        <div />
        <div>
          <el-button @click="isShowModal = false">{{ $t('message.qx') }}</el-button>
          <el-button
            type="primary"
            :loading="subLoading"
            @click="onSubmit"
          >{{ $t('message.qr') }}</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getBraceletDepositList, getBillList, createBraceletOrder } from '@/api'
import MemberSearch from '@/components/MemberSearch'
export default {
  components: {
    MemberSearch
  },
  data() {
    return {
      isShowModal: false,
      releForm: {},
      TicketAbleResult: false,
      TicketAbleList: [],
      default_pic: require('@/icons/png/default_pic.png'),
      activeTicketItem: {},
      memberInfo: {},
      cashPledge: '',
      subLoading: false,
      depositList: [],
      braceletList: [],
      modalDialog: this.$store.getters.dialog,
      rules: {}
    }
  },
  created() {
	 
  },
  methods: {
    handleBracelet() {
      const braceletList = [...this.braceletList]
      let pd = true
      if (this.releForm.braceletId) {
        braceletList.forEach(s => {
          if (s === this.releForm.braceletId) {
            this.$set(this.releForm, 'braceletId', '')
            this.$message.info(this.$t('message.shytjqcxxz'))
            pd = false
            return false
          }
        })
        if (pd) {
          this.braceletList.push(this.releForm.braceletId)
          this.$set(this.releForm, 'braceletId', '')
        }
      }
      console.log(12312, this.braceletList)
    },
    show(braceletId) {
      this.isShowModal = true
      this.releForm = {}
      this.braceletList = [braceletId]
      this.cashPledge = ''
      this.memberInfo = {}
      this.TicketAbleResult = false
      this.activeTicketItem = {}
      this.$nextTick(() => {
        this.$refs.MemberSearch.clearSearch();
		this.$refs.braceletInput.focus();  
      })
      this.getBraceletDepositList()
    },
    getBraceletDepositList() {
      getBraceletDepositList({ param: { status: '1' }}).then(res => {
        if (res.errorCode === '000000') {
          this.depositList = res.recordList || []
          if (res.recordList.length > 0) {
            this.cashPledge = res.recordList[0].id
          } else {
            this.cashPledge = ''
          }
        }
      }).catch(() => { })
    },
    onSubmit() {
      this.subLoading = true
      const releForm = { ...this.releForm }
      const braceletIds = [...this.braceletList]
      const activeTicketItem = { ...this.activeTicketItem }
      if (!this.braceletList || this.braceletList.length === 0) {
        this.$message.info(this.$t('message.qxglsh'))
      }
      createBraceletOrder({
        param: {
          billId: activeTicketItem.billId,
          billType: activeTicketItem.billType,
          code: activeTicketItem.code,
          braceletIds,
          // braceletId: releForm.braceletId,
          depositId: this.cashPledge,
          memberId: releForm.memberId,
          phone: this.memberInfo.phone,
          userName: this.memberInfo.nickName ? this.memberInfo.nickName : this.$t('message.sk')
        }
      }).then(res => {
        this.subLoading = false
        if (res.errorCode === '000000') {
          if (res.record) {
            const param = {
              orderId: res.record,
              price: this.priceName(this.cashPledge),
              memberInfo: this.memberInfo,
              memberId: releForm.memberId,
              allPrice: this.priceName(this.cashPledge),
              goodsInfo: [{ ...releForm, price: this.priceName(this.cashPledge), num: 1 }]
            }
            this.isShowModal = false
            this.$emit('success', param)
          } else {
            this.isShowModal = false
            this.$message.success(this.$t('message.glcg'))
          }
        }
      }).catch(() => { this.subLoading = false })
    },
    priceName(payM) {
      const temp = this.depositList.find((item) => item.id === payM)
      return temp ? temp.price : '-'
    },
    releRecord() {
      this.isShowModal = false
      this.$router.replace(`/vipList/associationList`)
    },
    memberSelect(val) {
      this.memberInfo = val
      this.$set(this.releForm, 'memberName', val.nickName)
      this.$set(this.releForm, 'memberId', val.id)
      this.getBillList()
    },
    ticketItemClick(e) {
      this.activeTicketItem = e
    },
    getBillList() {
      const { releForm } = this
      getBillList({ param: { code: releForm.code, key: this.memberInfo.phone }}).then((res) => {
        if (res.errorCode !== '000000') return
        this.TicketAbleResult = true
        this.$nextTick(() => {
          const obj = res.record.memberInfo || {}
          if (obj && obj.memberId) {
            this.$set(this.releForm, 'memberId', obj.memberId)
          } else {
            this.$set(this.releForm, 'memberId', '')
          }
          this.memberInfo = {
            ...obj,
            id: obj.memberId
          }
          this.TicketAbleList = res.record.bills || []
          if (res.record.bills.length > 0) {
            this.activeTicketItem = res.record.bills[0]
          } else {
            this.activeTicketItem = {}
          }
        })
      })
    },
    memberClear() {
      this.memberInfo = {}
      this.TicketAbleResult = false
      this.$set(this.releForm, 'memberName', '')
      this.$set(this.releForm, 'memberId', '')
    },
    closeModal() { }
  }
}
</script>

<style lang="scss" scoped>
.verificat_info_wrap {
  .verificat_info-main {
    display: flex;

    .left {
      flex: 1;
      overflow: auto;
      height: 380px;
      margin-right: 20px;

      .info_item {
        cursor: pointer;
        padding: 6px 12px;
        margin-bottom: 10px;
        border-radius: 2px;
        border: 1px solid #dfe2e8;

        h2 {
          padding: 5px 0;
          margin: 0;
          font-size: 16px;
        }

        .line {
          display: flex;
          padding: 5px 0;

          .span6 {
            flex: 5;
            margin-right: 10px;
          }

          .span4 {
            flex: 5;
          }
        }
      }

      .active {
        border: 1px solid #435ebe;
        background: #f4f7fc;
      }

      .default_noticket {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          width: 160px;
        }
      }
    }

    .right {
      width: 280px;
      height: 380px;
      background-color: #f4f7fc;
      padding: 20px;

      .head_wrap {
        display: flex;
        align-items: center;
        margin-bottom: 30px;

        .wrap {
          flex: 1;

          .name {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 10px;
          }

          .phone {
            color: #666666;
          }
        }
      }

      .line {
        margin-top: 20px;

        .key {
          display: inline-block;
          // width: 70px;
        }
      }
    }
  }
}
.verificat_footer {
  text-align: left;
  display: flex;
  justify-content: space-between;
  .verificat_num_wrap {
    flex: 1;
  }
}
.shxx {
  border: 1px solid #DFE2E8;
  height: 38px;
  padding: 0 16px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  overflow: hidden;
  // white-space: nowrap;
  // overflow-x: auto;
  .xzSh {
    flex: none;
    margin-right: 16px;
    display: inline-block;
    padding: 0 10px;
    border: 1px solid #DFE2E8;
    line-height: 30px;
    border-radius: 5px;
    span {
      margin-right: 3px;
    }
  }
}
</style>
